<template>
  <view class="app">
    <text class="back-btn iconfont icon-close" @click="navBack(3)"></text>
    <view class="left-top-sign">LOGIN</view>
    <view class="welcome">欢迎回来</view>
    <!-- 手机验证码 -->
    <view class="input-content">
      <view class="input-item">
        <text class="tit">手机号码</text>
        <view class="">
          <input v-model="mobile" maxlength="11" type="nuober" placeholder="请输入手机号码" placeholder-style="color:#909399" value="" />
        </view>
      </view>

      <view class="input-item">
        <text class="tit">验证码</text>
        <view class="row">
          <input v-model="code" maxlength="6" type="nuober" placeholder="请输入手机号码" placeholder-style="color:#909399" value="" />

          <!-- 同名目录组件 -->
          <mxg-code :mobile="mobile" templateCode="MSM_199999123123" />
        </view>
      </view>

      <button :loading="loading" type="primary" @click="login">登录</button>
    </view>

    <!-- #ifndef H5 -->
    <view class="other-wrapper center column">
      <view class="line">
        <text class="tit">社交账号登录</text>
      </view>

      <view class="row ">
        <image @click="toProviderLogin('weixin')" src="/static/share/weixin.png" mode=""></image>

        <!-- #ifdef APP-PLUS -->
        <image class="itemQQ" @click="toProviderLogin('qq')" src="/static/share/qq.png" mode=""></image>
        <!-- #endif -->

      </view>
    </view>
    <!-- #endif -->

    <!-- 协议 -->
    <view class="agreement  center">
      <text @click="checkAgreement" :class="{active:agreement}" class="iconfont icon-roundcheckfill "></text>
      <text @click="checkAgreement">请认真阅读并同意</text>
      <text class="tit" @click="navTo('/pages/public/xieyi')">《用户服务协议》</text>
      <text class="tit" @click="navTo('/pages/public/yinsi')">《隐私权政策》</text>

    </view>
    <u-loading-page :loading="loading" font-size="15" icon-size="36" color="#5af" bg-color="#00000047" loading-color="#FFFFFF" loadingText="登录中..."></u-loading-page>
  </view>
</template>

<script>
import api from '@/api/auth.js'
export default {
  data () {
    return {
      mobile: '19835308218',//手机号码
      code: '333333',//验证码
      loading: false,
      agreement: true, // 默认是勾选协议
    }
  },
  methods: {
    async	login () {
      //协议
      if (!this.agreement) {
        this.$util.msg('请阅读并同意用户服务及隐私协议')
        return
      }

      const { mobile, code } = this  //这一步是直接拿到了data 中的数据    省略了 this.mobile  this.code
      if (!this.$util.checkStr(mobile, 'mobile')) {
        this.$util.msg('请输入有效手机号码')
        return
      }

      if (!this.$util.checkStr(code, 'mobileCode')) {
        this.$util.msg('验证码输入错误')
        return
      }

      //调用接口
      this.loading = true
      // uni.showLoading({
      // 	title:'登录中',
      // 	mask:true
      // })

      const data = { mobile, code }  //传递的数据在加简写
      const res = await api.login(data)

      // uni.hideLoading()
      if (res.code === 20000) {
        this.loginSuccessCallBack(res.data)
      } else {
        this.$util.msg(res.message)
      }
    },


    //登录成功后操作  vuex 状态
    loginSuccessCallBack (data) {
      //状态管理保存用户信息
      this.$store.commit('setToken', data)
      setTimeout(() => {
        this.loading = false
        this.$util.msg('登录成功')
      }, 2000)
      // this.$util.navTo('/')
      //返回上一步
      setTimeout(() => {
        this.navBack()
      }, 3000)

      // this.$util.navTo()
    },

    //第三方授权登录
    toProviderLogin (provider) {
      if (!this.agreement) {
        this.$util.msg('请阅读并统一用户服务及隐私协议')
        return
      }
      uni.showLoading({
        mask: true
      })

      uni.login({
        provider,
        // #ifdef MP-ALIPAY
        scopes: 'auth_user',//支付宝小程序要设置主动授权
        //#endif
        success: (res) => {
          console.log('授权成功', res)
          // #ifdef APP-PLUS
          const data = { userInfo: res.authResult }
          // #endif

          // 注意小程序的 要传code 给后端 
          // #ifdef MP-WEIXIN
          const data = { code: res.code }
          // #endif
          //  2. 授权成功后 请求自己的后台认证接口来完成自己平台的认证
          this.getServiceUserInfo(data)
        },
        fail: (err) => {
          this.$util.msg('授权登录失败')
          uni.hideLoading()
        }
      })

    },
    //获取应用内的认证授权信息
    async	getServiceUserInfo (reqData) {
      //1.调用后台接口完成登录
      const { code, message, data } = await api.loginByProvider(reqData)
      uni.hideLoading()
      if (code !== 20000) {
        this.$util.msg(message)
        return
      }

      //2.成功后判断是否绑定手机号
      if (data.userInfo.mobile && data.access_token) {
        //登录成功
        this.loginSuccessCallBack(data)
      } else {
        //未绑定手机号  、 进入绑定手机号页面
        this.$util.msg('授权成功 请绑定手机号')
        this.navTo('/pages/auth/bind-mobile?data=' + JSON.stringify(data))
      }
    },

    checkAgreement () {
      this.agreement = !this.agreement
    }
  }
}
</script>

<style lang="scss">
image {
  width: 80rpx;
  height: 80rpx;
}
.app {
  padding-top: 200rpx;
}
/* 关闭按钮 */
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 39rpx;
  color: #606266;
}

.left-top-sign {
  font-size: 120rpx;
  color: #f8f8f8;
}

.welcome {
  position: relative;
  top: -90rpx;
  padding-left: 60rpx;
  font-size: 46rpx;
  color: #555;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}

.input-content {
  padding: 0 60rpx;
}
.itemQQ {
  margin-left: 100rpx;
}
.input-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 30rpx;
  background: #f8f6fc;
  height: 120rpx;
  border-radius: 4px;
  margin-bottom: 50rpx;

  &:last-child {
    margin-bottom: 0;
  }
  .row {
    width: 100%;
  }

  .tit {
    height: 50rpx;
    line-height: 56rpx;
    font-size: 26rpx;
    color: #606266;
  }
  input {
    flex: 1;
    height: 60rpx;
    font-size: 30rpx;
    color: #303133;
    width: 100%;
  }
}

button[type='primary'] {
  background-color: $xg-color-primary !important;
}

.button-hover[type='primary'] {
  background-color: $xg-text-color-blue !important;
}

/* 其他登录方式 */
.other-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
  margin-top: 80rpx;

  .weixin {
    border: 0;
  }
  .line {
    margin-bottom: 40rpx;
    .tit {
      margin: 0 32rpx;
      font-size: 24rpx;
      color: #606266;
    }
    &:before,
    &:after {
      content: '';
      width: 160rpx;
      height: 0;
      border-top: 1px solid #e0e0e0;
    }
  }
  .icon {
    width: 80rpx;
    height: 80rpx;
    margin: 0 50rpx;
  }
}

.agreement {
  position: absolute;
  left: 0;
  bottom: 10rpx;
  width: 750rpx;
  height: 90rpx;
  font-size: 24rpx;
  color: #999;
  .iconfont {
    font-size: 36rpx;
    color: #ccc;
    margin-right: 8rpx;
    &.active {
      color: $xg-color-primary;
    }
  }
  .tit {
    color: #40a2ff;
  }
}
</style>
